import { Menu, Icon, Input } from 'ant-design-vue'

const { Item, ItemGroup, SubMenu } = Menu
const { Search } = Input

import {Component, Prop, Vue,Watch,Emit,Provide,Inject,Mixins} from "vue-property-decorator";

@Component({
    components: {},
})
export default class TreeComponent extends Vue {
    @Prop({type: Array, required: true})
    public dataSource: any[];
    @Prop({type: Array, default: () => []})
    public openKeys: any[];
    @Prop({type: Boolean, default:false})
    public search: boolean;

    public localOpenKeys:any[]=[];

    constructor() {
        super();
    }

    created () {
        this.localOpenKeys = this.openKeys.slice(0)
    }

    handlePlus (item) {
        this.$emit('add', item)
    }
    handleTitleClick (...args) {
        this.$emit('titleClick', { args })
    }

    renderSearch () {
        return (
            <Search
                placeholder="input search text"
                style="width: 100%; margin-bottom: 1rem"
            />
        )
    }
    renderIcon (icon) {
        return icon && (<Icon type={icon} />) || null
    }
    renderMenuItem (item,key=undefined) {
        return (
            <Item key={item.key}>
                { this.renderIcon(item.icon) }
                { item.title }
                <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
            </Item>
        )
    }

    renderItem (item,key=undefined) {
        return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
    }

    renderItemGroup (item) {
        const childrenItems = item.children.map(o => {
            return this.renderItem(o, o.key)
        })

        return (
            <ItemGroup key={item.key}>
                <template slot="title">
                    <span>{ item.title }</span>
                    <a-dropdown>
                        <a class="btn"><a-icon type="ellipsis" /></a>
                        <a-menu slot="overlay">
                            <a-menu-item key="1">新增</a-menu-item>
                            <a-menu-item key="2">合并</a-menu-item>
                            <a-menu-item key="3">移除</a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </template>
                { childrenItems }
            </ItemGroup>
        )
    }
    renderSubItem (item, key) {
        const childrenItems = item.children && item.children.map(o => {
            return this.renderItem(o, o.key)
        })

        const title = (
            <span slot="title">
          { this.renderIcon(item.icon) }
                <span>{ item.title }</span>
        </span>
        )

        if (item.group) {
            return this.renderItemGroup(item)
        }
        // titleClick={this.handleTitleClick(item)}
        return (
            <SubMenu key={key}>
                { title }
                { childrenItems }
            </SubMenu>
        )
    }

    render () {
        const { dataSource, search } = this.$props

        // this.localOpenKeys = openKeys.slice(0)
        const list = dataSource.map(item => {
            return this.renderItem(item)
        })

        return (
            <div class="tree-wrapper">
                { search ? this.renderSearch() : null }
                <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
                    { list }
                </Menu>
            </div>
        )
    }
}


//export default {
//     name: 'Tree',
//     props: {
//         dataSource: {
//             type: Array,
//             required: true
//         },
//         openKeys: {
//             type: Array,
//             default: () => []
//         },
//         search: {
//             type: Boolean,
//             default: false
//         }
//     },
//     created () {
//         this.localOpenKeys = this.openKeys.slice(0)
//     },
//     data () {
//         return {
//             localOpenKeys: []
//         }
//     },
//     methods: {
//         handlePlus (item) {
//             this.$emit('add', item)
//         },
//         handleTitleClick (...args) {
//             this.$emit('titleClick', { args })
//         },
//
//         renderSearch () {
//             return (
//                 <Search
//                     placeholder="input search text"
//                     style="width: 100%; margin-bottom: 1rem"
//                 />
//             )
//         },
//         renderIcon (icon) {
//             return icon && (<Icon type={icon} />) || null
//         },
//         renderMenuItem (item) {
//             return (
//                 <Item key={item.key}>
//                     { this.renderIcon(item.icon) }
//                     { item.title }
//                     <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
//                 </Item>
//             )
//         },
//         renderItem (item) {
//             return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
//         },
//         renderItemGroup (item) {
//             const childrenItems = item.children.map(o => {
//                 return this.renderItem(o, o.key)
//             })
//
//             return (
//                 <ItemGroup key={item.key}>
//                     <template slot="title">
//                         <span>{ item.title }</span>
//                         <a-dropdown>
//                             <a class="btn"><a-icon type="ellipsis" /></a>
//                             <a-menu slot="overlay">
//                                 <a-menu-item key="1">新增</a-menu-item>
//                                 <a-menu-item key="2">合并</a-menu-item>
//                                 <a-menu-item key="3">移除</a-menu-item>
//                             </a-menu>
//                         </a-dropdown>
//                     </template>
//                     { childrenItems }
//                 </ItemGroup>
//             )
//         },
//         renderSubItem (item, key) {
//             const childrenItems = item.children && item.children.map(o => {
//                 return this.renderItem(o, o.key)
//             })
//
//             const title = (
//                 <span slot="title">
//           { this.renderIcon(item.icon) }
//                     <span>{ item.title }</span>
//         </span>
//             )
//
//             if (item.group) {
//                 return this.renderItemGroup(item)
//             }
//             // titleClick={this.handleTitleClick(item)}
//             return (
//                 <SubMenu key={key}>
//                     { title }
//                     { childrenItems }
//                 </SubMenu>
//             )
//         }
//     },
//     render () {
//         const { dataSource, search } = this.$props
//
//         // this.localOpenKeys = openKeys.slice(0)
//         const list = dataSource.map(item => {
//             return this.renderItem(item)
//         })
//
//         return (
//             <div class="tree-wrapper">
//                 { search ? this.renderSearch() : null }
//                 <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
//                     { list }
//                 </Menu>
//             </div>
//         )
//     }
// }
